<!--
*@Author: QWP
*@Description: 安全生产检查隐患
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white">
    <a-layout class="f-h-100 s-bg-white">
      <u-table-header>
        <u-form
          :model="searchF.model"
          :gutter="16"
          :elements="searchEl"
          class="f-w-auto"
          :isSearch="true"
          @formChange="getSearch(1)"
        >
          <a-col>
            <a-space>
              <u-icon-button @click="getSearch(1)">查询</u-icon-button>
            </a-space>
          </a-col>
        </u-form>
      </u-table-header>
      <u-table-content>
        <u-table
          :columns="columns"
          :data="tabData"
          v-model:pagination="pagenation"
          :loading="loading"
          :scroll="{ y: useTableScroll() }"
          @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
          @onDblclick="
            record => {
              currentRow = record;
              showDispose = true;
            }
          "
          @change="getSearch"
        ></u-table>
      </u-table-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch, onActivated } from 'vue';
import {
  useRoute,
  useRouter,
  onBeforeRouteUpdate,
  onBeforeRouteLeave,
} from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
import {
  Button,
  ColProps,
  FormItemProps,
  TableColumnProps,
  Tag,
  Image,
  ImagePreviewGroup
} from 'ant-design-vue';
import { _IExtra } from '@/src/components/common/form/interface';
import { useTableScroll } from '@/hooks/useTable';
import * as enterpriseFileAPI from '@/service/emergency/enterpriseFile';

import * as resourceServeTree from '@/service/resource/tree';
const router = useRouter();
const route = useRoute();
const emits = defineEmits(['focusChange']);

const treeExpandes = ref(['fda30684-6473-4fb5-8cdb-0d6001a7dd15']);

const riskOriginTypeOptions = ref([
  { label: '企业自查', value: '1' },
  { label: '政府排查', value: '2' },
  { label: '其他', value: '7' },
]);

let pagenation = ref({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const hazardLevel = ref([]);
const upgradeStateName = ref([]);
const searchF = reactive({
  model: {
    keywords: null,
  },
});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '100',
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = reactive([
  {
    label: '关键字',
    key: 'keywords',
    element: 'input',
    col: { span: 5 },
    formItemProps: formItemProps,
    componentProps: { placeholder: '请输入企业名称' },
  },
  {
    label: '隐患来源',
    key: 'riskOriginType',
    element: 'select',
    col: { span: 5 },
    formItemProps: formItemProps,
    componentProps: {
      options: riskOriginTypeOptions.value,
    },
  },
  {
    label: '整改状态',
    key: 'upgradeStateName',
    element: 'select',
    col: { span: 5 },
    formItemProps: formItemProps,
    componentProps: {
      options: computed(() => upgradeStateName.value),
    },
  },

  {
    label: '隐患级别',
    key: 'hazardLevel',
    element: 'select',
    col: { span: 5 },
    formItemProps: formItemProps,
    componentProps: {
      options: computed(() => hazardLevel.value),
    },
  },
  {
    label: '整改期限开始',
    key: 'limitDateStart',
    element: 'datepicker',
    col: { span: 5 },
    formItemProps: formItemProps,
  },
  {
    label: '整改期限结束',
    key: 'limitDateEnd',
    element: 'datepicker',
    col: { span: 5 },
    formItemProps: formItemProps,
  },
]);

// 列表
const currentRow = ref({});
const loading = ref<boolean>(false);
const tabSelData = ref<any[]>([]);
const tabData = ref<any[]>([]);

let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: 'ROW_ID',
    title: '序号',
    width: 50,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  { dataIndex: 'entName', title: '企业名称 ', width: 200 },
  {
    dataIndex: 'hazardLevel',
    title: '隐患级别 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'riskOriginType',
    title: '隐患来源 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        let str = '';
        riskOriginTypeOptions.value.forEach(item => {
          if (item.value == text) {
            str = item.label;
          }
        });
        return str;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'riskDescribe',
    title: '隐患描述 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'imageUrl',
    title: '隐患图片 ',
    width: 200,
    customRender: ({ text, record, index }) => text ? renderImg(text) : ''
  },

  {
    dataIndex: 'upgradeTypeName',
    title: '隐患类别 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'limitDate',
    title: '整改期限 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'upgradeStateName',
    title: '整改状态 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'checkTime',
    title: '检查时间',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'checkRecordName',
    title: '检查记录名称',
    width: 400,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
]);

onMounted(() => {
  const enterpriseFileEntName = localStorage.getItem('enterpriseFileEntName');
  if (enterpriseFileEntName) {
    searchF.model.keywords = enterpriseFileEntName;
  }
  getSearch();
  getSelectData();
  localStorage.removeItem('enterpriseFileEntName');
});
onActivated(() => {
  const enterpriseFileEntName = localStorage.getItem('enterpriseFileEntName');
  if (enterpriseFileEntName) {
    searchF.model.keywords = enterpriseFileEntName;
  }
  getSearch();
  getSelectData();
  localStorage.removeItem('enterpriseFileEntName');
});

// 列表查询
const getSearch = async (current?: number) => {
  loading.value = true;
  try {
    if (current == 1) {
      pagenation.value.current = 1;
    }
    searchF.current = pagenation.value.current;
    searchF.size = pagenation.value.pageSize;
    const res = await enterpriseFileAPI.getCompany(searchF);
    if (res.code == 0) {
      tabData.value = res.data.records || [];
      pagenation.value.total = res.data.total;
    }
  } catch (error) {}
  loading.value = false;
};

//获取下拉框数据源
const getSelectData = async () => {
  const res = await enterpriseFileAPI.getSelectData();
  if (res.code == 0) {
    upgradeStateName.value = (res.data['upgradeStateName'] || []).map(item => {
      return {
        label: item.upgradeStateName,
        value: item.upgradeStateName,
      }
    });
    hazardLevel.value = (res.data['hazardLevel'] || []).map(item => {
      return {
        label: item.hazardLevel,
        value: item.hazardLevel,
      }
    });
  }
};

const renderImg = (url: string): any => {
  let urls = url.split(',');
  let arr = urls.map((src, index) => {
    return h(Image, { src: src, width: index == 0 ? 80 : 0, height: 80 })
  })
  return h(ImagePreviewGroup, () => arr)
}

let showDispose = ref<boolean>(false);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
